<script setup name="HomePage">
import WOW from 'wow.js'
import { getCurrentInstance, onMounted } from 'vue'
// import Swiper from 'swiper'
import { Navigation, Pagination, Scrollbar, A11y, Lazy, Autoplay } from 'swiper'
import { Swiper, SwiperSlide} from 'swiper/vue';
import { ref,watch } from 'vue';
import contactUs from './components/ContactUs.vue';
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
import 'swiper/css/lazy'
import 'swiper/css/autoplay'

import axios from 'axios'
import ReportApiUrlConfig from '@/api/select.ts'
import { useRouter } from 'vue-router'
const router=useRouter()
import bannerList from '@/assets/img/bannerList.png';
import img1 from '@/assets/img/454697276_3405401846424161_6714836523712133306_n.jpg';
import img2 from '@/assets/img/455211227_3408552382775774_3747423341816665784_n.jpg';
import img3 from '@/assets/img/455272236_3408552426109103_4634044439735676366_n.jpg';
import img4 from '@/assets/img/455658811_3410028382628174_624948773311211577_n.jpg';
import img5 from '@/assets/img/455690960_3410028395961506_1876472873481041139_n.jpg';
import img6 from '@/assets/img/458176643_3424151097882569_4675889533762032737_n.jpg';

const swiperList = [
  // {
  //   img: bannerList,
  //   title: 'Avertex International Limited',
  //   content: 'With a commitment to provide reasonably priced quality second hand and refurbished textile machinery and equipment since 2009. '
  // },
  {
    img: img1,
    title: 'Avertex International Limited',
    content: 'With a commitment to provide reasonably priced quality second hand and refurbished textile machinery and equipment since 2009. '
  },
  {
    img: img2,
    title: 'Avertex International Limited',
    content: 'With a commitment to provide reasonably priced quality second hand and refurbished textile machinery and equipment since 2009. '
  },
  {
    img: img3,
    title: 'Avertex International Limited',
    content: 'With a commitment to provide reasonably priced quality second hand and refurbished textile machinery and equipment since 2009. '
  },
  {
    img: img4,
    title: 'Avertex International Limited',
    content: 'With a commitment to provide reasonably priced quality second hand and refurbished textile machinery and equipment since 2009. '
  },
  {
    img: img5,
    title: 'Avertex International Limited',
    content: 'With a commitment to provide reasonably priced quality second hand and refurbished textile machinery and equipment since 2009. '
  },
  {
    img: img6,
    title: 'Avertex International Limited',
    content: 'With a commitment to provide reasonably priced quality second hand and refurbished textile machinery and equipment since 2009. '
  }
];



const modules = [Navigation, Pagination, Scrollbar, A11y, Lazy, Autoplay]

const picList = [
  { url: '/picList/1.jpg', text: 'aboutPicList 1' },
  { url: '/picList/2.jpg', text: 'aboutPicList 2' },
  { url: '/picList/3.jpg', text: 'aboutPicList 3' },
  { url: '/picList/4.jpg', text: 'aboutPicList 4' }
]
const honorList = [
  { url: '/honor1.png', text: 'aboutPicList 1' },
  { url: '/honor2.png', text: 'aboutPicList 2' },
  { url: '/honor3.png', text: 'aboutPicList 3' },
  { url: '/honor4.png', text: 'aboutPicList 4' },
  { url: '/honor1.png', text: 'aboutPicList 1' },
  { url: '/honor2.png', text: 'aboutPicList 2' },
  { url: '/honor3.png', text: 'aboutPicList 3' },
  { url: '/honor4.png', text: 'aboutPicList 4' }
]
const recommendList = ref([
  {
    "id": "1866876566806294529",
    "name": "测试商品数据",
    "productDesc": "hahahahah",
    "productPrice": "1000",
    "vipFlag": 1,
    "recommendLevel": 4,
    "location": "GuangZhou",
    "newFlag": 1,
    "imgList": "http://110.42.41.27:9010/machine/machine/2024/12/12/90263e32eef64c20b7fdfe7f2b6cb046.jpeg,http://110.42.41.27:9010/machine/machine/2024/12/12/d772ad4254b64f539e0ba88b4cb75d72.jpg",
    "imgIdList": "1866876011551744002,1866876011572715522",
    "urlList": null,
    "imgCover": "http://110.42.41.27:9010/machine/machine/2024/12/12/9f2b28b37a324ba1afed91a64c57f990.jpeg",
    "imgIdCover": "1866875986071347201",
    "video": "http://110.42.41.27:9010/machine/machine/2024/12/12/6e70633937774e5ebbbae89fd527e294.mov",
    "videoId": "1866876102333259778",
    "stockNumber": "893123123",
    "model": "Model",
    "conditions": "condi",
    "loadingWight": null,
    "matchPower": null,
    "configurations": null
  }
])

// 事件处理函数
const handleImageClick = (item) => {
  console.log('图片被点击:', item);
  // 跳转到 detail 页面
  router.push('/detail/' + item.id)
    .then(() => {
      // 确保页面滚动到顶部
      window.scrollTo(0, 0); // 滚动到页面顶部
    });
};
// 分列逻辑
const leftColumn = picList.filter((_, index) => index % 2 === 0)
const rightColumn = picList.filter((_, index) => index % 2 === 1)

const querySupplyUseNum = async () => {
  const { data } = await axios.get(ReportApiUrlConfig.recommendTT);
  if (!data) return;
  recommendList.value = data.data;
};
const carousel = ref('300px');

onMounted(() => {
  const updateDialogWidth = () => {
    carousel.value = window.innerWidth <= 768 ? '130px' : '300px';
  };

  updateDialogWidth();
  window.addEventListener('resize', updateDialogWidth);
});
querySupplyUseNum();
</script>
<template>
  <div id="NewsInformation">
    <!-- 轮播图 -->
    <swiper
      id="swiper"
      :modules="modules"
      :slides-per-view="1"
      :space-between="0"
      navigation
      lazy
      loop
      autoplay
      :pagination="{
        clickable: true
      }"
    >
      <swiper-slide
        class="banner-swiper"
        v-for="(item, index) in swiperList"
        :key="index"
      >
        <img class="swiper-lazy" :data-src="item.img" alt="轮播图" />
        <div class="swiper-lazy-preloader"></div>
        <div class="swiper-slide-title">
          <h1>{{ item.title }}</h1>
          <p>{{ item.content }}</p>
        </div>
      </swiper-slide>
    </swiper>

    <!-- 大数据管理系统 -->
    <div class="container-fuild">

      <div class=" word-box">
        <div class=" w-box">
          w:
        </div>
        <div class="industry">Industry</div>
        <div class="application">Application Area</div>
        <div class="provide">We provide used textile equipment and machinery for the world Committed To Building A Better Future
        </div>
      </div>

      <div class="pic-box">
        <div class="left-box">
          <div
            class="pic-item"
            v-for="(pic, index) in leftColumn"
            :key="'left-' + index"
          >
            <img :src="pic.url" alt="Picture" />
<!--            <div class="overlay">{{ pic.text }}</div>-->
          </div>
        </div>
        <div class="right-box">
          <div
            class="pic-item"
            v-for="(pic, index) in rightColumn"
            :key="'right-' + index"
          >
            <img :src="pic.url" alt="Picture" />
<!--            <div class="overlay">{{ pic.text }}</div>-->
          </div>
        </div>
      </div>
    </div>
    <div class="recommend-3products">
      <div class="industry-1">Recommended Products</div>
      <el-carousel :interval="4000" type="card" :height="carousel" style="width: 100%">
        <el-carousel-item v-for="item in recommendList" :key="item">
          <div class="img-pic">
            <img :src="item.imgCover" alt="图片"  @click="handleImageClick(item)">
            <div class="pic-text">{{ item.productDesc }}</div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="aboutus">
      <div class="aboutus-title">About Us</div>
      <img src="/地图.png" class="aboutus-icon" />
      <div class="aboutus-description">
        <div class="car">
          <img src="/car.png">
        </div>
        <div class="aboutus-text">
          <div class="aboutus-txt-title" >Avertex International Limited</div>
          <div class="aboutus-txt">
            With a commitment to provide reasonably priced quality second
              hand and refurbished textile machinery and equipment since 2009.
            Avertex International Limited adheres to a
            longstanding philosophy of creating long term engaging
            relationships through direct contact and customer satisfaction.
          </div>
        </div>
      </div>
      <div class="double-pic">
        <img src="/pic1.png" class="picone"></img>
        <img src="/pic2.png" class="pictwo"></img>
      </div>

      <div class="double-pic-1">
        <div class="txt1">
          Founded in 2009 by Mr Jerry Wang, we’ve grown to become a leading global supplier of used textile machinery.
          His strong belief in building close relationships with customers has created a valuable referral line that
          has broadened our customer base and strengthen our global reputation as being a source for being a reliable used textile machinery dealer.
          Avertex International Limited has successfully sold thousands of machine to over 10 different coutries.
          Our inventory is vast and includes all types of used high quality textile machinery such as Used Toyota machine and Dyeing jets.        </div>
        <div class="txt2">We are a global progressive enterprise</div>
      </div>
      <div class="threebody">
        <div class="body1">
          <div class="line1">5000<span style="color: #5e5e5e">+</span></div>
          <div class="line2">SALES VOLUME</div>
        </div>
        <div class="body1">
          <div class="line1">200<span style="color: #5e5e5e">+</span></div>
          <div class="line2">COOPERATE</div>
        </div>
        <div class="body1">
          <div class="line1">30<span style="color: #5e5e5e">+</span></div>
          <div class="line2">ESTABLISH</div>
        </div>
      </div>

    </div>
    <div class="aboutus">
      <div class="aboutus-title">Honer certificate</div>
      <div class="honor-list">
        <div class="honor-item" v-for="(item, index) in honorList" :key="'honor-' + index">
          <img :src="item.url" :alt="item.text" />
        </div>
      </div>
    </div>
    <div class="aboutus">
      <div class="aboutus-title">Contact Us</div>
     <contactUs style="margin-top: 40px ;margin-bottom: 60px"/>
    </div>
  </div>
</template>



<style scoped>

/* 整体盒子 */
#NewsInformation{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

.container-fuild {
  display: flex;
  position: relative;
  width: 65%;
  height: 378px;
  gap: 10px;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
}
  .recommend-3products{
  width: 60%;
  }
  .el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
  }

.img-pic {
  width: 100%;
  height: 100%;
  overflow: hidden; /* 确保超出部分隐藏 */
}

.img-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例并填充满容器 */
  display: block; /* 去掉图片底部可能的间隙 */
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.word-box {
  position: relative;
  width: 50%;
  height: 201px;
}

.pic-box {
  height: 378px;
  display: flex;
  justify-content: center;
  gap: 27px;
}

.left-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 让内容贴近下边距 */
  width: 45%; /* 每列宽度 */
  gap: 18px;
}

.right-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 让内容贴近上边距 */
  width: 45%; /* 每列宽度 */
  gap: 18px;
}


.pic-item {
  position: relative;
  width: 248px;
  height: 166px;
  overflow: hidden;
}

.pic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pic-text {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 15%;
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明灰色背景 */
  color: white;
  font-size: 12px;
  text-align: center;
  padding: 5px;
  box-sizing: border-box;
  line-height: 3; /* 行高设置 */
  overflow: hidden; /* 隐藏超出内容 */
  display: -webkit-box; /* 配合 line-clamp 使用 */
  -webkit-box-orient: vertical; /* 设置为垂直方向 */
  -webkit-line-clamp: 2; /* 限制显示两行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: normal; /* 允许文本换行 */
  word-break: break-word; /* 避免长单词超出容器 */
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* 灰色半透明蒙版 */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.w-box {
  width: 95%;
  height: 201px;
  font-family: PingFangSC, PingFang SC;
  font-weight: normal;
  font-size: 367px;
  color: #ECECEC;
  line-height: 130px;
  text-align: right;
  font-style: normal;
  text-transform: none;
}

.industry {
  top: 11px;
  position: absolute;
  width: 173px;
  height: 32px;
  font-family: PingFangSC, PingFang SC;
  font-weight: bolder;
  font-size: 32px;
  color: #FF6D2C;
  line-height: 32px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.industry-1{
  width: 100%;
  height: 32px;
  margin-bottom: 20px;
  font-family: PingFangSC, PingFang SC;
  font-weight: bolder;
  font-size: 32px;
  color: #26264c;
  line-height: 32px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  //text-decoration: underline; /* 添加下划线 */
  //text-decoration-color: #30a9fc; /* 下划线颜色 */
  //text-underline-offset: 4px;
}

.application {
  position: absolute;
  top: 66px;
  width: 361px;
  height: 32px;
  font-family: PingFangSC, PingFang SC;
  font-weight: bolder;
  font-size: 34px;
  color: #212E37;
  line-height: 34px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.provide {
  position: absolute;
  top: 130px;
  width: 428px;
  height: 17px;
  font-family: PingFangSC, PingFang SC;
  font-weight: bolder;
  font-size: 15px;
  color: #999999;
  line-height: 15px;
  text-align: left;
  font-style: normal;
  text-transform: none;

}

/* 顶部轮播图 */
#swiper {
  width: 100%;
  height: 600px;
}

#swiper .banner-swiper {
  width: 100%;
  height: 100%;
  position: relative;
}

#swiper .banner-swiper img {
  width: 100%;
  height: 100%;
}

#swiper .banner-swiper .swiper-slide-title {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999999;
  width: 100%;
  height: 100%;
  color: #fff;
  text-align: center;
  line-height: 80px;
}

#swiper .banner-swiper .swiper-slide-title > h1 {
  font-size: 50px;
  margin-top: 12%;
}

#swiper .banner-swiper .swiper-slide-title > p {
  font-size: 20px;
  margin-top: 1%;
  font-weight: 700;
}

.aboutus {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 65%;
  gap: 25px;
}
.aboutus-icon{
  position: absolute;
  height: 50%;
  width: 100%;
  right: 0px ;
  bottom: 0px;
  z-index: -1;
}
.aboutus-title {
  position: absolute;
  font-family: PingFangSC, PingFang SC;
  font-weight: bolder;
  font-size: 20px;
  color: #212E37;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.aboutus-title::after {
  content: ""; /* 创建一个空的伪元素 */
  position: absolute;
  bottom: -5px; /* 与文字的间距 */
  left: 0;
  width: 30px; /* 下划线的长度 */
  height: 3px; /* 下划线的厚度 */
  background-color: #30a9fc; /* 下划线颜色 */
}

.aboutus-description {
  display: flex;
  flex-direction: row;
  height: 23%;
}

.aboutus-description img {
  margin: 40px 80px 20px 20px;
  border: 2px dashed #d3d3d3;
}

.aboutus-text {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.aboutus-txt {
  font-family: PingFangSC, PingFang SC;
  font-weight: normal;
  font-size: 15px;
  color: #28364E;
  line-height: 26px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.double-pic {
  height: 35%;
  gap: 10px;
  display: flex;
  flex-direction: row;
}

.picone {
  width: 65%;
  height: 100%;
}

.pictwo {
  width: 35%;
  height: 100%;
}
.double-pic-1 {
  height: 15%;
  gap: 10px;
  display: flex;
  flex-direction: row;
}
.txt2 {
  display: flex; /* 使用 flexbox */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  width: 29%;
  height: 100%;

  font-family: PingFangSC, PingFang SC;
  font-weight: bolder;
  font-size: 22px;
  color: #212E37;
  line-height: 30px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.txt1 {
  width: 75%;
  height: 100%;
}

.threebody {
  height: 15%;
  gap: 10px;
  display: flex;
  flex-direction: row;
  .body1{
    width: 33%;
    display: flex;
    flex-direction: column;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    .line1{
      font-family: PingFangSC, PingFang SC;
      font-weight: normal;
      font-size: 20px;
      color: #014AC7;
      line-height: 20px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    .line2{

    }
  }
}

.honor-list {
  margin-top: 40px;
  display: flex; /* 使用弹性布局 */
  flex-wrap: wrap; /* 自动换行 */
  gap: 3px; /* 每个 honor-item 之间的间距 */
}

.honor-item {
  flex: 1 1 calc(25% - 3px); /* 每行最多展示4个，减去间距 */
  box-sizing: border-box; /* 包含内边距和边框宽度 */
  padding: 1px; /* 图片的内边距 */
  border: 1px dashed #d3d3d3; /* 虚线边框 */
  text-align: center; /* 文本居中 */
}

.honor-item img {
  max-width: 100%; /* 图片宽度自适应容器 */
  height: auto; /* 保持图片比例 */
}
.aboutus-txt-title{
  font-family: PingFangSC, PingFang SC;font-weight: bolder;font-size: 20px
}
/* 对小屏设备进行缩放 */
@media screen and (max-width: 768px) {
//transform: scale(0.6);
  .swiper-slide-title{
    //transform: scale(0.3);
  }
  #swiper{
    width: 100%;
    height: 50%;
  }
  #swiper .banner-swiper .swiper-slide-title {
    transform: scale(0.6);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999999999;
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    line-height: 80px;
  }
  container-fuild{
    width: 100%;
    display: flex;
    position: relative;
    width: 100%;
    height: 378px;
    gap: 10px;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
  }
  .word-box {
    transform: scale(0.6);
    position: relative;
    width: 50%;
    height: 201px;
    margin-left: -30%;
  }
  .pic-box{
    transform: scale(0.8);
    width: 50%;
    height: 378px;
    display: flex;
    justify-content: center;
    gap: 27px;
    .left-box{
      transform: scale(1);
    }
    .right-box{
      transform: scale(1);
    }
    .pic-item{
      transform: scale(0.6);
    }
  }
  .pic-text {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30%;
  }

  .industry-1{
    width: 100%;
    height: 19px;
    margin-bottom: 12px;
    font-family: PingFangSC, PingFang SC;
    font-weight: bolder;
    font-size: 19px;
    color: #26264c;
    line-height: 19px;
    text-align: center;
    font-style: normal;
    text-transform: none;
    //text-decoration: underline; /* 添加下划线 */
    //text-decoration-color: #30a9fc; /* 下划线颜色 */
    //text-underline-offset: 4px;
  }
  .aboutus {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 65%;
    gap: 25px;
  }
  .car{
    width: 0px;
  }
  .aboutus-icon{
    position: absolute;
    height: 50%;
    width: 100%;
    right: 0px ;
    bottom: 0px;
    z-index: -1;
  }
  .aboutus-title {
    //position: absolute;
    font-family: PingFangSC, PingFang SC;
    font-weight: bolder;
    font-size: 20px;
    color: #212E37;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .aboutus-title::after {
    content: ""; /* 创建一个空的伪元素 */
    position: absolute;
    bottom: -5px; /* 与文字的间距 */
    left: 0;
    width: 30px; /* 下划线的长度 */
    height: 3px; /* 下划线的厚度 */
    background-color: #30a9fc; /* 下划线颜色 */
  }

  .aboutus-description {
    display: flex;
    flex-direction: row;
    height: 23%;
    gap:5px;
  }

  .aboutus-description img {
    margin-top:40px ;
    margin-left: -60px;
    border: 2px dashed #d3d3d3;
    width: 0;
  }

  .aboutus-text {
    width: 100%;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .aboutus-txt-title{
    font-size: 0;
  }
  .aboutus-txt {
    font-family: PingFangSC, PingFang SC;
    font-weight: normal;
    font-size: 15px;
    color: #28364E;
    line-height: 26px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .double-pic-1 {
    height: 15%;
    gap: 10px;
    display: flex;
    flex-direction: row;
  }
  .txt2 {
    display: flex; /* 使用 flexbox */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    width: 0%;
    height: 100%;

    font-family: PingFangSC, PingFang SC;
    font-weight: bolder;
    font-size: 0px;
    color: #212E37;
    line-height: 0px;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }

  .txt1 {
    width: 100%;
    height: 100%;
  }
  .threebody{
    transform: scale(0.8);
  }
}

</style>

